<!DOCTYPE html>
<html>

<head>
  <title><%= title %></title>
  <link rel='stylesheet' href='/stylesheets/style.css'>
  <style>
    /* 全局样式 */
    body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 0;
      background-color: #f4f4f4;
    }

    header {
      background-color: #333;
      color: white;
      text-align: center;
      padding: 20px;
    }

    h1 {
      margin: 0;
    }

    main {
      padding: 20px;
    }

    p {
      font-size: 18px;
    }

    a {
      color: #007bff;
      text-decoration: none;
      transition: color 0.3s ease;
    }

    a:hover {
      color: #0056b3;
    }

    /* 登录按钮样式 */
   .login-btn {
      display: inline-block;
      background-color: #007bff;
      color: white;
      padding: 10px 20px;
      border-radius: 5px;
      margin-top: 20px;
      transition: background-color 0.3s ease;
    }

   .login-btn:hover {
      background-color: #0056b3;
    }

    footer {
      background-color: #333;
      color: white;
      text-align: center;
      padding: 10px;
      position: fixed;
      bottom: 0;
      width: 100%;
    }
  </style>
</head>

<body align="center" style="background-image: url('https://img.shetu66.com/2023/07/13/1689235073633261.png'); background-size: cover;">
  <header>
    <h1><%= title %></h1>
  </header>
  <main>
    <p>Welcome to <%= title %></p>
    <div class="login-link">
      <a href="/login" class="login-btn">登录</a>
    </div>
  </main>
  <footer>
    &copy; <%= new Date().getFullYear() %> Book Management System. All rights reserved.
  </footer>

</body>

</html>